import React from "react";
import ItemList from "../components/ItemList";
import AddItem from "../components/AddItem";
import FilterItem from "../components/FilterItem";

import { useTodosData } from "../hooks/useTodoData";
export default function TodoView() {
  const { filterTodos, deleteTodo, toggleTodo, addTodo,filters,setFilter } = useTodosData();


  return (
    <>
      <h1>todoViews</h1>
      <AddItem onAdd={addTodo}></AddItem>
      <ItemList todos={filterTodos()} onDel={deleteTodo} onToggle={toggleTodo}>
        <h2>待办列表</h2>
      </ItemList>
      <FilterItem filters={filters} setFilter={setFilter}></FilterItem>
    </>
  );
}
